<template>
  <div class="powerload-dashboard">
    <!-- 动态电流背景 -->
    <div class="electric-background">
      <div class="electric-line horizontal" v-for="i in 8" :key="'h' + i" :style="{ top: (i * 12.5) + '%', animationDelay: (i * 0.2) + 's' }"></div>
      <div class="electric-line vertical" v-for="i in 12" :key="'v' + i" :style="{ left: (i * 8.33) + '%', animationDelay: (i * 0.15) + 's' }"></div>
    </div>
    
    <!-- 功能模块网格 -->
    <div class="modules-grid">
      <div class="module-button prediction-overview" @click="navigateToModule('prediction-overview')">
        <div class="module-icon">
          <Icon type="ios-analytics" size="48" />
        </div>
        <div class="module-content">
          <h3>预测总览</h3>
          <p>实时负荷预测与趋势分析</p>
        </div>
      </div>
      
      <div class="module-button error-analysis" @click="navigateToModule('model-evaluation')">
        <div class="module-icon">
          <Icon type="ios-stats" size="48" />
        </div>
        <div class="module-content">
          <h3>模型评估</h3>
          <p>多模型性能对比分析</p>
        </div>
      </div>
      
      <div class="module-button usage-patterns" @click="navigateToModule('usage-patterns')">
        <div class="module-icon">
          <Icon type="ios-pulse" size="48" />
        </div>
        <div class="module-content">
          <h3>用电模式</h3>
          <p>时段用电规律分析</p>
        </div>
      </div>
      
      <div class="module-button weather-impact" @click="navigateToModule('weather-impact')">
        <div class="module-icon">
          <Icon type="ios-cloud" size="48" />
        </div>
        <div class="module-content">
          <h3>气象影响</h3>
          <p>天气对负荷的影响分析</p>
        </div>
      </div>
      
      <div class="module-button historical-query" @click="navigateToModule('historical-query')">
        <div class="module-icon">
          <Icon type="ios-search" size="48" />
        </div>
        <div class="module-content">
          <h3>历史查询</h3>
          <p>历史数据检索与分析</p>
        </div>
      </div>
      
      <div class="module-button data-overview" @click="navigateToModule('data-overview')">
        <div class="module-icon">
          <Icon type="ios-pie" size="48" />
        </div>
        <div class="module-content">
          <h3>数据概览</h3>
          <p>数据统计与可视化</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PowerloadDashboard',
  data() {
    return {
      currentTime: '',
      timeInterval: null
    }
  },
  mounted() {
    console.log('🎯 PowerloadDashboard组件已挂载')
    this.updateTime()
    this.timeInterval = setInterval(this.updateTime, 1000)
  },
  beforeDestroy() {
    if (this.timeInterval) {
      clearInterval(this.timeInterval)
    }
  },
  methods: {
    updateTime() {
      this.currentTime = new Date().toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    navigateToModule(moduleName) {
      const targetPath = `/${moduleName}`
      
      // 检查是否已经在目标路由，避免冗余导航
      if (this.$route.path === targetPath) {
        console.log(`已在目标页面 ${targetPath}，跳过导航`)
        return
      }
      
      // 使用try-catch捕获可能的导航错误
      this.$router.push(targetPath).catch(err => {
        // 忽略导航到相同路由的错误
        if (err.name !== 'NavigationDuplicated') {
          console.error('模块导航错误:', err)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.powerload-dashboard {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #0c1426 0%, #1a2332 50%, #0f1b2a 100%);
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  
  // 动态电流背景
  .electric-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    z-index: 1;
    
    .electric-line {
      position: absolute;
      background: linear-gradient(90deg, transparent, #75deef, transparent);
      box-shadow: 0 0 10px #75deef;
      
      &.horizontal {
        width: 100%;
        height: 2px;
        animation: electricFlowH 3s ease-in-out infinite;
      }
      
      &.vertical {
        width: 2px;
        height: 100%;
        animation: electricFlowV 4s ease-in-out infinite;
      }
    }
  }
  
  .modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 40px;
    max-width: 1200px;
    width: 100%;
    height: 80vh;
    position: relative;
    z-index: 10;
    
    .module-button {
      background: rgba(7, 19, 50, 0.7);
      border: 2px solid transparent;
      border-radius: 20px;
      padding: 30px;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
        transition: transform 0.6s ease;
      }
      
      &:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        
        &::before {
          transform: translateX(100%);
        }
      }
      
      .module-icon {
        margin-bottom: 20px;
        padding: 20px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        transition: all 0.3s ease;
        
        :deep(.ivu-icon) {
          display: block;
          transition: all 0.3s ease;
        }
      }
      
      .module-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        h3 {
          font-size: 24px;
          font-weight: bold;
          margin: 0 0 10px 0;
          transition: all 0.3s ease;
        }
        
        p {
          font-size: 14px;
          color: #999;
          margin: 0;
          line-height: 1.4;
          transition: all 0.3s ease;
        }
      }
      
      // 预测总览 - 蓝色主题
      &.prediction-overview {
        border-color: #75deef;
        background: linear-gradient(135deg, rgba(117, 222, 239, 0.1), rgba(78, 205, 196, 0.1));
        
        .module-icon {
          background: rgba(117, 222, 239, 0.2);
          
          :deep(.ivu-icon) {
            color: #75deef;
          }
        }
        
        .module-content h3 {
          color: #75deef;
        }
        
        &:hover {
          border-color: #75deef;
          box-shadow: 0 20px 40px rgba(117, 222, 239, 0.3);
          
          .module-icon {
            background: rgba(117, 222, 239, 0.3);
            transform: scale(1.1);
          }
        }
      }
      
      // 误差分析 - 红色主题
      &.error-analysis {
        border-color: #ff6b6b;
        background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 138, 128, 0.1));
        
        .module-icon {
          background: rgba(255, 107, 107, 0.2);
          
          :deep(.ivu-icon) {
            color: #ff6b6b;
          }
        }
        
        .module-content h3 {
          color: #ff6b6b;
        }
        
        &:hover {
          border-color: #ff6b6b;
          box-shadow: 0 20px 40px rgba(255, 107, 107, 0.3);
          
          .module-icon {
            background: rgba(255, 107, 107, 0.3);
            transform: scale(1.1);
          }
        }
      }
      
      // 用电模式 - 青色主题
      &.usage-patterns {
        border-color: #4ecdc4;
        background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(38, 208, 206, 0.1));
        
        .module-icon {
          background: rgba(78, 205, 196, 0.2);
          
          :deep(.ivu-icon) {
            color: #4ecdc4;
          }
        }
        
        .module-content h3 {
          color: #4ecdc4;
        }
        
        &:hover {
          border-color: #4ecdc4;
          box-shadow: 0 20px 40px rgba(78, 205, 196, 0.3);
          
          .module-icon {
            background: rgba(78, 205, 196, 0.3);
            transform: scale(1.1);
          }
        }
      }
      
      // 气象影响 - 绿色主题
      &.weather-impact {
        border-color: #96ceb4;
        background: linear-gradient(135deg, rgba(150, 206, 180, 0.1), rgba(78, 205, 196, 0.1));
        
        .module-icon {
          background: rgba(150, 206, 180, 0.2);
          
          :deep(.ivu-icon) {
            color: #96ceb4;
          }
        }
        
        .module-content h3 {
          color: #96ceb4;
        }
        
        &:hover {
          border-color: #96ceb4;
          box-shadow: 0 20px 40px rgba(150, 206, 180, 0.3);
          
          .module-icon {
            background: rgba(150, 206, 180, 0.3);
            transform: scale(1.1);
          }
        }
      }
      
      // 历史查询 - 黄色主题
      &.historical-query {
        border-color: #f7dc6f;
        background: linear-gradient(135deg, rgba(247, 220, 111, 0.1), rgba(243, 156, 18, 0.1));
        
        .module-icon {
          background: rgba(247, 220, 111, 0.2);
          
          :deep(.ivu-icon) {
            color: #f7dc6f;
          }
        }
        
        .module-content h3 {
          color: #f7dc6f;
        }
        
        &:hover {
          border-color: #f7dc6f;
          box-shadow: 0 20px 40px rgba(247, 220, 111, 0.3);
          
          .module-icon {
            background: rgba(247, 220, 111, 0.3);
            transform: scale(1.1);
          }
        }
      }
      
      // 数据概览 - 紫色主题
      &.data-overview {
        border-color: #bb8fce;
        background: linear-gradient(135deg, rgba(187, 143, 206, 0.1), rgba(142, 68, 173, 0.1));
        
        .module-icon {
          background: rgba(187, 143, 206, 0.2);
          
          :deep(.ivu-icon) {
            color: #bb8fce;
          }
        }
        
        .module-content h3 {
          color: #bb8fce;
        }
        
        &:hover {
          border-color: #bb8fce;
          box-shadow: 0 20px 40px rgba(187, 143, 206, 0.3);
          
          .module-icon {
            background: rgba(187, 143, 206, 0.3);
            transform: scale(1.1);
          }
        }
      }
    }
  }
}

// 电流流动动画
@keyframes electricFlowH {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes electricFlowV {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .powerload-dashboard {
    padding: 30px;
    
    .modules-grid {
      gap: 30px;
      
      .module-button {
        padding: 25px;
        
        .module-icon {
          margin-bottom: 15px;
          padding: 15px;
          
          :deep(.ivu-icon) {
            font-size: 36px !important;
          }
        }
        
        .module-content {
          h3 {
            font-size: 20px;
          }
          
          p {
            font-size: 13px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .powerload-dashboard {
    padding: 20px;
    
    .modules-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 20px;
      height: 85vh;
      
      .module-button {
        padding: 20px;
        
        .module-icon {
          margin-bottom: 10px;
          padding: 10px;
          
          :deep(.ivu-icon) {
            font-size: 28px !important;
          }
        }
        
        .module-content {
          h3 {
            font-size: 18px;
          }
          
          p {
            font-size: 12px;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .powerload-dashboard {
    padding: 15px;
    
    .modules-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(6, 1fr);
      gap: 15px;
      height: 90vh;
      
      .module-button {
        padding: 15px;
        
        .module-icon {
          margin-bottom: 8px;
          padding: 8px;
          
          :deep(.ivu-icon) {
            font-size: 24px !important;
          }
        }
        
        .module-content {
          h3 {
            font-size: 16px;
          }
          
          p {
            font-size: 11px;
          }
        }
      }
    }
  }
}
</style> 